<template>
<div id="root">
    <StarDemo/>
  <div class="main">
    <h1>现在时间:{{ time }}</h1>
    <button class="btn" @click="toList">返回todolist</button>
    <div class="dt">
        <div class="d1">
            <li>
            <h2>今年还剩{{ remainYear }}天</h2>
            <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="parseInt(parseInt(remainYear * 0.27))"
            ></el-progress>
        </li>
        <li>
            <h2>本周还剩余:{{ remainDay }}天</h2>
            <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="parseInt(remainDay * 14.2)"
            ></el-progress>
        </li>
        </div>
        <div class="d2">
            <li>
            <h2>本月还剩余:{{ passDay }}天</h2>
            <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="parseInt(passDay * 3.33)"
        ></el-progress>
        </li>
        <li>
            <h2>距离今天结束剩余:{{ remainTime }}小时</h2>
            <el-progress
            :text-inside="true"
            :stroke-width="26"
            :percentage="parseInt(remainTime * 4.16)"
            ></el-progress>
        </li>
        </div>
       
       
    </div>
  

    
   
  </div>
</div>
 
</template>

<script scoped>
import StarDemo from '../components/todolist/star-demo'
export default {
  name: "Time",
  data() {
    return {
      time: "",
      // remainYear: 15,
    };
  },
  components:{StarDemo},
  created() {
    this.setTime();
    this.getTimes();
  },
  beforeDestroy() {
    if (this.time) {
      clearInterval(this.getTimes);
    }
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    setTime() {
      setInterval(this.getTimes, 1000);
    },
    getTimes() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      let hours = new Date().getHours();
      let minutes = new Date().getMinutes();
      let seconds = new Date().getSeconds();
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      if (seconds < 10) {
        seconds = "0" + seconds;
      }

      this.time =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
    },
    toList(){
        this.$router.push('/list?userId='+this.$route.query.userId)
        // console.log(this.$route.query.userId);
        // this.$store.commit('listAbout/SetUserId',this.$route.query.userId)
        // this.$store.commit('listAbout/setListId',this.$route.query.userId)
    }
  },
  computed: {
    //计算本周剩余天数
    remainDay() {
      let currentDay = new Date().getUTCDay();
      return 7 - currentDay;
    },
    //本月剩多少天结束
    passDay() {
      let nowMonth = new Date().getMonth() + 1;
      let passday = new Date().getDate();
      console.log(nowMonth);
      if (
        nowMonth === 1 ||
        nowMonth === 3 ||
        nowMonth === 5 ||
        nowMonth === 7 ||
        nowMonth === 8 ||
        nowMonth === 10 ||
        nowMonth === 12
      ) {
        return 31 - passday;
      }
      if (
        nowMonth === 4 ||
        nowMonth === 6 ||
        nowMonth === 9 ||
        nowMonth === 11
      ) {
        return 30 - passday;
      }
      if (nowMonth === 2) {
        return 28 - passday;
      }
    },
    //计算距今天结束剩余的天数
    remainTime() {
      let remaintime = new Date().getHours() + 1;
      return 24 - remaintime;
    },
    //计算今年的剩余时间(截至12.31)
    remainYear() {
      let nowTime = new Date();
      let endTime = new Date(nowTime.getFullYear() + 1, 1, 1, 0, 0, 0, 0);
      return parseInt((endTime - nowTime) / 86400000) - 30;
    },
  },
};
</script scoped>

<style scoped>
h2,h1{
    color: #d7e7b4;
}
li{
    list-style: none;
    /* float: left; */
    width: 300px;
}
.main{
    position: absolute;
    top: 62px;
    left: 350px;
}

.dt{
    display: flex;   
    width: 800px;
    height: 1000px;
    justify-content:space-between;
}
.d1 li{
    margin-top: 20px;
}
.d2 li{
    margin-top: 20px;
}
button{
  position: absolute;
  color: #fff;
  background-color: rgb(78, 137, 33);
  border: 1px solid rgb(47, 100, 7);
  top: 7px;
  left: 553px;
}
</style>